<template>
  <div class="bgc-white p24">
    <div class="flex-center-between">
      <a-space :size="24">
        <a-input-search v-model="companyName" placeholder="用工单位" @change="onInputChange" />
        <a-range-picker
          :value="dateRange"
          :placeholder="['开始月份', '结束月份']"
          :mode="['month', 'month']"
          format="YYYY-MM"
          style="width: 240px"
          @panelChange="onPanelChange"
        />
      </a-space>
      <a-button type="primary" @click="goImport">服务费导入</a-button>
    </div>
    <a-table :dataSource="recordLst" :columns="feeColumns" :pagination="pagination" rowKey="id" class="mt24" @change="onTableChange" />
  </div>
</template>
<script>
import { saleServerCostRecordsReq } from "../api";
import { feeColumns } from "../funcs";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      feeColumns,
      recordLst: [],
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      companyName: "",
      dateRange: null
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.onSearchChange();
  },
  methods: {
    goImport() {
      this.$router.push("/admin/kehufuwufeijilu/upload");
    },
    onInputChange() {
      this.pagination.current = 1;
      this.onSearchChange();
    },
    onPanelChange(value) {
      this.dateRange = value;
      this.pagination.current = 1;
      this.onSearchChange();
    },
    onTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.onSearchChange();
    },
    onSearchChange() {
      const params = {
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize
      };
      if (this.companyName) {
        params["companyName"] = this.companyName;
      }
      if (this.dateRange && this.dateRange.length > 0) {
        const dates = this.dateRange.map((item) => item.format("YYYY-MM"));
        params["beginTime"] = dates[0];
        params["endTime"] = dates[1];
      }
      saleServerCostRecordsReq(params)
        .then((res) => {
          this.recordLst = res.data.entities;
          this.pagination.total = res.data.entityCount;
        })
        .catch((err) => {
          console.log("saleServerCostRecordsReq", err);
        });
    }
  }
};
</script>
<style lang="scss"></style>
